{__NOLAYOUT__}
<layout name="no_nav" />

<!-- TOPBAR -->
<header class="top-bar flex-row">
  <span class="row-item row-item-auto top-bar-back" onclick="window.history.back()">返回</span>
  <h3 class="row-item top-bar-name">{$productGoods.name}</h3>
  <span class="row-item row-item-auto top-bar-menu"></span>
</header>

<!-- 商品图片 -->
<section class="pr-detail-header">
  
  <figure class="tc">
    <img src="{$productGoods.pic}">
  </figure>

</section>

<section class="pr-detail pr-detail-info">
    
  <header class="flex-row">
    <div class="row-item row-item-6">
      <p class="pr-info-now-price">商城价:{$productGoods.price}</p>
      <p class="pr-info-origin-price">原价:<del>{$productGoods.price_high}</del></p>
    </div>

    <div class="row-item row-item-4">
      <p class="pr-info-discount">{$productGoods['price']/$productGoods['price_high']*10|sprintf='%.2f',###|substr=0,-1}折</p>
      <p class="pr-info-saled">{$productGoods['saled_count']+$productGoods['saled_base']}人已购买</p>
    </div>  
  </header>
  
  <div class="pr-info-freight">
    <eq name="productGoods['is_shipping']" value="1">
    <p>免运费</p><else />
    <p>运费：<foreach name="productGoods['shipping_cfg']" item="vo">{$vo.name}:{$vo.price}&nbsp;</foreach></p>
    </eq>
  </div>

</section>


<section class="pr-detail">
  
  <h5 class="pr-detail-title">选择商品类型</h5>

  <section id="pr-buy-check" class="pr-detail-content">
      
    <form id="pr-form" method="post" action="{:U('Order/confirmOrder')}">

      <!-- 类型 -->
      <volist name="productGoods.attributes" id="vo">

      <dl class="pr-check-item pr-check-attr">
        <dt class="pr-check-key" data-null="请选择{$vo.name}">{$vo.name}:</dt>
        <dd class="pr-check-value">
          <foreach name="vo.values" key="key" item="item">
          <input hidden type="radio" id="{$vo.id}|{$key}" name="attrs[{$vo.id}]" value="{$key}">
          <label class="pr-check-value-item" data-value="{$vo.id}|{$key}" for="{$vo.id}|{$key}">{$item}</label>
          </foreach>
        </dd>
      </dl>

      </volist>
      
      <!-- 购买数量 -->
      <dl class="pr-check-item">
        <dt class="pr-check-key">数量:</dt>
        <dd class="pr-check-value">
          <p class="pr-num flex-row">
            <span id="buy-num-minus" class="pr-num-minus row-item row-item-3" data-type="m">-</span>
            <input id="buy-num" class="pr-num-input row-item row-item-4" name="quantity" readonly="readonly" value="1">
            <span id="buy-num-plus" class="pr-num-plus row-item row-item-3" data-type="p">+</span>
          </p>
        </dd>
      </dl>
      
      <input type="hidden" name="id" value="{$productGoods.id}">
      <input type="hidden" name="sid" value="{$sid}">  

    </form>
    
  </section>

</section>


<!-- 商品详情以及评价 -->
<section class="pr-detail">

  <header id="pr-tab" class="pr-cc-header flex-row">
    <a class="pr-cc-header-item row-item current" data-id="pr-content" href="javascript:;">商品详情</a>
    <a class="pr-cc-header-item row-item" data-id="pr-comment" href="javascript:;">商品评价</a>
  </header>
  
  <div id="pr-cc-container" class="pr-cc-container">
    <div id="pr-content" class="pr-content">{$productGoods.content}</div>
    <div id="pr-comment" class="pr-comment dn"></div>
  </div>
  
</section>

<section id="pr-action" class="pr-buy-action">
  <a id="pr-addto-cart" class="btn btn-action-orange" href="javascript:;" data-jump="0">加入购物车</a>
  <a id="pr-buynow" class="btn btn-action-red" href="javascript:;" data-jump="1">立即购买</a>
</section>

<script type="text/javascript">
  (function(){
    
    // 选择属性
    $("#pr-buy-check input[type=radio]").on("change", selectAttr);

    function selectAttr() {
      var labels = $(this).siblings("label");
      $(labels).each(function(){
        $(this).removeClass("checked");
      });
      $(this).next().addClass("checked");
    };

    // 改变商品数量
    var buyNum = $("#buy-num");
    $("#buy-num-minus, #buy-num-plus").on("tap", changeNum);

    function changeNum() {

      var v = $(buyNum).val()*1,
          type = $(this).attr("data-type");

      if ( type === "m" ) {
        v <= 1 ? APP.alert("数量真的已经不能再少了T^T")
               : $(buyNum).val(v - 1);
      } else if ( type === "p" ) {
        $(buyNum).val(v + 1);
      };

    };

    // 加入购物车和购买
    $("#pr-addto-cart, #pr-buynow").on("tap", function() {
      var jump = $(this).attr("data-jump")*1;
      isAllChecked(function(){
        insertCart(jump);
      });
    });

    function insertCart(jump) {

      var postData = $("#pr-form").serialize();
      APP.showLoading();

      $.post("{:U('Cart/addItem')}", postData, function(response) {
        APP.hideLoading();
        if ( response.error === 0 ) {
          jump ? window.location.href="{:U('Order/confirmOrder', 'sid='.$sid)}" : insertSuccess();
        } else {
          APP.alert("不知道出什么错误了，请您再试一次T_T");
        };
      });

    };

    function insertSuccess() {
      require(["modal"], function(M) {
        M.confirm({
          title: "添加到购物车",
          text: "该商品已成功添加到购物车",
          buttons: [{
            text: "继续逛",
            close: true
          }, {
            text: "去购物车",
            click: function() {
              window.location.href = "{:url(null, 'Cart', 'showCart', 'sid='.$sid)}";
            }
          }]
        })
      });
    };

    function isAllChecked( callback ) {

      var checkedAll = true;

      $(".pr-check-attr").each(function() {
        
        var checked = false;

        $(this).find("input[type='radio']").each(function() {
          $(this).prop("checked") && ( checked = true );
        });

        if ( !checked ) {
          var info = $(this).children(".pr-check-key").attr("data-null");
          APP.alert(info);
          checkedAll = false;
          return false;
        };

      });

      checkedAll && callback && callback();
      
    };
    
    
    // // 获取商品评价内容
    // var productId = {$productGoods.id};
    // GH.ajax( "{:U('Home/Rate/moreRate')}", { "product_id": productId }, function( data ) {
    //   data.extra && ( showComment( data.extra ) );
    // });
    
    // function showComment( data ) {
    //   var html = "";
    //   for (var i = 0; item = data[i]; i++) {
    //     html += "<li><p>" + item.content + "</p>"
    //            +"<div class='user clearfix'><span>" + item.userNickName + "</span><time>" + new Date(item.create_time*1000).Format("yyyy-MM-dd hh:mm:ss") + "</time></div>"
    //            +"</li>";
    //   };
    //   document.getElementById( "product-comment" ).innerHTML = "<ul class='product-comment'>" + html + "</ul>";
    // };
    
    
    // 切换商品详情和评价
    $("#pr-tab a").on("tap", function(){
      $(this).siblings("a").removeClass("current");
      $(this).addClass("current");
      $("#pr-cc-container").children("div").hide();
      $( "#" + $(this).attr("data-id") ).show();
    });

  })();
</script>